import React from 'react';
import { Icon } from 'antd-mobile';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import styles from './common.css';
import MessageList from './pages/messageList/messageList';
import ProblemResponse from './pages/problemResponse/problemResponse';
import PartTimeMessage from './pages/partTimeMessage/partTimeMessage';

const newTopic = require('../../../icons/new.svg');

function Index({ dispatch, loading, message}) {

  const { noticeInfo, newProblemResponse, newPartTimeMessage } = message;

  // console.log('noticeInfo', JSON.stringify(noticeInfo));

  const messageListProps = {
    list: [noticeInfo],
    onViewMember(id){
      dispatch(routerRedux.push({
        pathname:'/announce'
      }))
    },
    showLimit(id){
      dispatch(routerRedux.push({
        pathname:'/announce'
      }))
    },
    onPagination() {
      // console.log('loading',loading);
      // console.log('pageNum',pageNum);
      // console.log('pages',pages);
      if (loading || JSON.stringify(list) == "[]") {
        return;
      }

      if (parseInt(pageNum) >= parseInt(pages)) {
        return;
      }
      dispatch({
        type: 'partTime/query',
        payload: {
          pageNum: pageNum + 1,
        }
      })
    }
  };

  const problemResponseProps ={
    item:newProblemResponse ? newProblemResponse : {},
    onViewMember(){
      dispatch(routerRedux.push({
        pathname:'/problem-response'
      }))
    },
    showLimit(){
      dispatch(routerRedux.push({
        pathname:'/problem-response'
      }))
    },
  }

  const partTimeMessageInfoProps ={
    item:newPartTimeMessage ? newPartTimeMessage : {},
    onViewMember(){
      dispatch(routerRedux.push({
        pathname:'/partTime-message'
      }))
    },
    showLimit(){
      dispatch(routerRedux.push({
        pathname:'/partTime-message'
      }))
    },
  }

  const CustLine = () => <div style={{width: '100%', height:'1px', backgroundColor:'#E4E4E4'}}></div>;

  return(
    <div>
      <div className={styles.title}>
        <div>消息列表</div>
        {/* <div onClick={() => onClick()} className={styles.btn}>
          <Icon type={newTopic} />
        </div> */}
      </div>
      <PartTimeMessage {...partTimeMessageInfoProps}/>
      <CustLine/>
      <ProblemResponse {...problemResponseProps}/>
      <MessageList {...messageListProps}/>
    </div>
  )
}

function mapStateToProps(state, ownProps) {
  return {
    loading: state.loading.global,
    message: state.message
  }
}

export default connect(mapStateToProps)(Index);
